/* Mobile-specific styles */

/* Hide elements on mobile */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  
  /* Adjust content padding on mobile */
  .ant-layout-content {
    padding: 12px !important;
    margin: 12px 8px !important;
  }
  
  /* Make tables responsive */
  .ant-table {
    overflow-x: auto;
  }
  
  /* Adjust form layouts */
  .ant-form-item {
    margin-bottom: 12px !important;
  }
  
  /* Make buttons more touch-friendly */
  .ant-btn {
    height: 40px !important;
    padding: 4px 15px !important;
    font-size: 16px !important;
  }
  
  /* Adjust card styles */
  .ant-card {
    margin-bottom: 12px !important;
  }
  
  /* Adjust modal width */
  .ant-modal {
    width: 90% !important;
    max-width: 100% !important;
    margin: 8px auto !important;
  }
  
  /* Adjust dashboard stats */
  .dashboard-stat-card {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
}

/* Tablet-specific styles (for reference) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet-specific styles here */
}

/* Mobile-optimized pages */
.mobile-orders-page,
.mobile-dashboard-page {
  /* These classes can be applied to the mobile versions of these pages */
}

/* Mobile-specific components */
.mobile-menu-button {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu-button {
    display: block;
  }
} 